<template>
    <div>
        <!--pages/recipe/recipe.wxml-->
        <div class="container column">
            <img class='person-bg' src='../assets/header-bg.png'></img>
            <!-- 内容部分 -->
            <div class='wrap column'>
                <div class='doctor-msg column'>
                    <div class='doctor-status'>
                        <div class='doctor-portrait'>
                            <img class='imgActive' :src='recipeDetail.avatar' />
                        </div>
                        <div class='doctor-nickname'>
                            <div class='nickname'>{{recipeDetail.doctorname}}</div>
                            <div class='hospital'>{{recipeDetail.orgname}} {{recipeDetail.descr}}</div>
                        </div>
                    </div>
                    <div class='speciality'>
                        <span class='name bold'>擅长病症：</span>
                        <span class='content'>{{recipeDetail.doctor_illness}}</span>
                    </div>
                </div>
                <div class='dialectical'>
                    <span class='name bold'>患者：</span>
                    <span class='content'>{{recipeDetail.patient_name}} {{recipeDetail.age}} {{recipeDetail.sex}}</span>
                </div>
                <div class='dialectical'>
                    <span class='name bold'>辨证：</span>
                    <span class='content'>{{recipeDetail.discrim}}</span>
                </div>
                <div class='recipe-detail border'>
                    <div class='recipe-des'>
                        <div class='status bold'>医生处方，已划价<span class='tips'>（共{{recipeDetail.warenumber}}味药，{{recipeDetail.quantity}}剂）</span></div>
                        <span class='tips' v-if="recipeDetail.preview_recipe == 0">医生处方需要支付医生诊疗费之后才可查看详情</span>
                        <span class='status' v-if="recipeDetail.preview_recipe == 1">处方:{{recipeDetail.text}}</span>
                        <span class='status'>药态：{{recipeDetail.drugstatename}}</span>
                        <div class='instand'>
                            <div class='instand-txt'>可代煎<span class='tips'>（药方代煎，密封邮寄+{{recipeDetail.decoct_fee}}一剂）</span></div>
                        </div>
                    </div>
                </div>
                <div class='recipe-detail border nomargin'>
                    <div class='recipe-des'>
                        <div class='status'><span class='bold'>药价：</span>￥{{recipeDetail.drug_fee}}</div>
                        <!-- <span class='tips'>服务费: + {{recipeDetail.service_fee}}</span> -->
                        <span class='status '><span class='bold'>合计：</span>￥{{recipeDetail.drug_fee}}</span>
                    </div>
                    <div class='receive'  @click='payforTap'>领取</div>
                </div>
            </div>
            <!-- 底部 -->
            <div class='recipe-bottom'>
                <div class='sign-part'>
                    <span class='title bold color'>医生签名</span>
                    <span class='name'>{{recipeDetail.doctorname}}</span>
                </div>
                <div class='recipe-time'>{{recipeDetail.createtime}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    import { recipebillinfo } from "./../api/index";
    import { Toast } from "mint-ui";
    export default {
        data() {
            return {
                flag:true,
                recipeid:'',//处方id
                status:'',
                recipeDetail:''//扫码进处方详情
            }
        },
        mounted(){
            let mstr = sessionStorage.getItem('mstr')
            this.recipeid = this.$route.params.recipeid
            this.status = this.$route.params.status
            recipebillinfo(mstr,this.recipeid).then(res=>{
                if(res.data.status === 1){
                    res.data.data.service_fee = res.data.data.decoct_fee * res.data.data.quantity
                    this.recipeDetail = res.data.data
                }else{
                    Toast({
                        message:res.data.info,
                        position:'center',
                        duration:2000
                    })
                }
            })
        },
        methods:{
            //去领取处方
            payforTap(){
                this.$router.push({
                    name:'buyDurg',
                    params:{
                        recipeid:this.recipeid,
                        status:this.status
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";

.bold{
    font-weight: bold;
}
.color{
    color: #bf8440;
}
.border{
    border-bottom: 1px solid #f2e3d0;
}
.container .person-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: torem(319px);
}

.container .wrap {
    padding: 0 !important;
    position: relative;
    z-index: 100;
    width: torem(690px);
    margin:0 auto;
}

.bgImg image {
    width: torem(750px);
    height: torem(280px);
}

.doctor-msg {
    width: torem(690px);
    background-color: #fff;
    box-shadow: 0px torem(5px) torem(9px) torem(1px) rgba(232, 203, 163, 0.46);
    border-radius: torem(10px);
    margin: torem(140px) auto 0;
    padding: 0 torem(20px);
}

.doctor-status {
    display: flex;
    height: torem(126px);
    border-bottom: 1px solid #f0d7b9;
    padding: 0 torem(8px);
    
}

.doctor-portrait img {
    width: torem(130px);
    height: torem(130px);
    background-color: #bf8541;
    box-shadow: 0px torem(8px) torem(13px) torem(3px) rgba(133, 72, 35, 0.33);
    border: solid torem(4px) #f0b96a;
    border-radius: 50%;
    position: relative;
    top:torem(-54px);
}

.doctor-nickname {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: torem(24px);
}

.doctor-nickname .nickname {
    font-size: torem(30px);
    color: #333;
}

.doctor-nickname .hospital {
    font-size: torem(28px);
    color: #bf8440;
    margin-top: torem(12px);
}

.speciality {
    height: torem(80px);
    display: flex;
    align-items: center;
    padding: 0 torem(8px);
}

.speciality .name {
    font-family: 'PingFang-SC-Bold';
    font-size: torem(28px);
    color: #333;
}

.speciality .content {
    font-size: torem(28px);
    color: #333;
}

.dialectical {
    width: torem(690px);
    height: torem(90px);
    display: flex;
    align-items: center;
    padding: 0 torem(26px);
    font-size: torem(28px);
    margin-top: torem(20px);
    background-color: #fff;
    box-shadow: 0px torem(5px) torem(9px) 1px rgba(232, 203, 163, 0.46);
    border-radius: torem(10px);
}

.recipe-detail {
    display: flex;
    width: torem(690px);
    padding: torem(26px);
    background-color: #fff;
    box-shadow: 0px torem(5px) torem(9px) torem(1px) rgba(232, 203, 163, 0.46);
    border-radius: torem(10px);
    margin-top: torem(20px);
}
.recipe-detail.nomargin{
    margin-top: 0;
    justify-content: space-between;
    align-items: center;
}

.recipe-detail .recipe-des {
    display: flex;
    flex-direction: column;
}

.recipe-detail .recipe-des .status {
    color: #333;
    font-size: torem(28px);
    align-items: center;
}

.recipe-detail .recipe-des .tips {
    color: #666;
    font-size: torem(22px);
    margin: torem(10px) 0;
}

.recipe-detail .receive {
    width: torem(140px);
    height: torem(80px);
    background-color: #db5034;
    border-radius: torem(10px);
    font-size: torem(30px);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: torem(30px);
}

.recipe-bottom {
    position: fixed;
    bottom: 0;
    width: torem(750px);
    height: torem(100px);
    background-color: #fff;
    border-top: 1px solid #efdac2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 torem(26px);
}

.recipe-bottom .sign-part .title {
    font-size: torem(30px);
    color: torem(36px);
}

.recipe-bottom .sign-part .name {
    font-size: torem(30px);
    color: torem(34px);
    margin-left: torem(40px);
}

.recipe-bottom .recipe-time {
    font-size: torem(30px);
    color: torem(34px);
}
.instand{
    font-size: torem(28px);
    align-items: center;
}
.instand .instand-txt{
    align-items: center;
    color: #333;
}
.instand img{
    width: torem(24px);
    height: torem(24px);
    margin-right: torem(15px);
   
}
</style>